<template>
    <view class="obj-money-list">
      <view class="obj-money-card">
        <view
          class="obj-money-content"
          v-for="item in productList"
          :key="item.id"
        >
          <image class="obj-money-image" :src="item.goods_image" mode="aspectFill"    @click="$emit('product-click', item)"/>
          <view class="obj-money-right"  @click="$emit('product-click', item)">
            <view class="obj-money-title">{{ item.goods_name }}</view>
            <view></view>
            <view>
              <view class="obj-money-bottom">
                <view class="obj-money-price">
                  <text class="obj-money-symbol">¥</text>
                  <text class="obj-money-value">{{ item.online_price }}</text>
                </view>
              </view>
              <view  @click="$emit('product-click', item)">
                <buy-button 
                  buttonWidth="90%" 
                  buttonText="立即加购" 
                ></buy-button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    name: "brand_series",
    props: {
      productList: {
        type: Array,
        default: () => []
      }
    },
    emits: ['product-click']
  };
  </script>
  
  <style lang="scss">
  
  .obj-money-card {
    padding: 12px;
  
    .obj-money-content {
      padding: 24rpx;
      background: #ffffff;
      border-radius: 12px;
      display: flex;
      align-items: center;
      border: 4rpx solid #e0b879;
      margin-bottom: 12px;
      &:last-child {
        margin-bottom: 0; // 最后一个元素不需要底部边距
      }
      .obj-money-image {
        width: 300rpx;
        height: 220rpx;
        border-radius: 16rpx;
        flex-shrink: 0;
      }
  
      .obj-money-right {
        flex: 1;
        margin-left: 28px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
  
        .obj-money-title {
          font-size: 15px;
          color: #333;
          line-height: 1.4;
          margin-bottom: 8px;
          font-weight: 500;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-all;
        }
  
        .obj-money-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;
          .obj-money-price {
            color: #db5656;
            .obj-money-symbol {
              font-size: 11px;
              margin-right: 2px;
            }
  
            .obj-money-value {
              font-size: 32rpx;
              font-weight: bold;
            }
          }
  
          // .obj-money-button {
          //   background-color: #db5656;
          //   color: #fff;
          //   border: none;
          //   border-radius: 20px;
          //   padding: 6px 20px;
          //   font-size: 14px;
          //   margin: 0;
  
          //   &:active {
          //     opacity: 0.9;
          //   }
          // }
        }
      }
    }
  }
  </style>
  